<template>
	<view class="login-container">
		<!-- 动态粒子背景 -->
		<view class="particle-bg">
			<view v-for="(dot, index) in particles" :key="index" class="particle" :style="{
				left: dot.x + '%',
				top: dot.y + '%',
				background: dot.color,
				transform: `scale(${dot.size})`
			}">
			</view>
		</view>

		<!-- 顶部情侣插画 -->
		<view class="header-illustration">
			<image src="../../static/couple_photo.jpg" mode="aspectFit"></image>
		</view>

		<!-- 角色切换 -->
		<view class="role-switch">
			<view v-for="role in roles" :key="role.value" class="role-card"
				:class="{ active: currentRole === role.value }" @click="switchRole(role.value)">
				<image :src="role.icon" mode="aspectFit"></image>
				<text>{{ role.label }}</text>
			</view>
		</view>

		<!-- 登录表单 -->
		<view class="form-box">
			<view class="form-title">
				<text>{{ welcomeText }}</text>
			</view>

			<u-form :model="form" ref="uForm" :rules="rules">
				<!-- 手机号输入 -->
				<u-form-item prop="telephone">
					<u-input v-model="form.telephone" placeholder="请输入你们的专属号码" placeholderClass="placeholder-style"
						prefixIcon="telephone" prefixIconStyle="color: #FF7F7F; font-size: 40rpx;">
						<template #prefix>
							<u-icon name="phone" color="#FF7F7F" size="40"></u-icon>
						</template>
					</u-input>
				</u-form-item>

				<!-- 密码输入 -->
				<u-form-item prop="password">
					<u-input v-model="form.password" placeholder="输入爱的密码" placeholderClass="placeholder-style"
						type="password" prefixIcon="lock" prefixIconStyle="color: #FF7F7F; font-size: 40rpx;">
						<template #prefix>
							<u-icon name="lock" color="#FF7F7F" size="40"></u-icon>
						</template>
					</u-input>
				</u-form-item>

				<!-- 登录按钮 -->
				<u-button @click="handleLogin" :customStyle="loginBtnStyle" :ripple="true" shape="circle"
					throttleTime="1000">
					<text class="button-text">开启甜蜜食光</text>
				</u-button>
			</u-form>

			<!-- 注册链接 -->
			<view class="footer-links">
				<text @click="navTo('/pages/login/register/register')">创建情侣账号</text>
				<text @click="navTo('/pages/login/forget/forget')">忘记密码</text>
			</view>
		</view>


		<!-- 动态爱心装饰 -->
		<view class="floating-hearts">
			<view v-for="n in 8" :key="n" class="heart" :style="getHeartStyle(n)">
				❤️
			</view>
		</view>
	</view>
</template>

<script>
import { login } from "@/api/users/users.js"
export default {
	data() {
		return {
			currentRole: 'couple', // 当前角色（couple/chef）
			roles: [
				{
					value: 'couple',
					label: '点餐入口',
					icon: '../../static/login/diancan.png'
				},
				{
					value: 'chef',
					label: '大厨入口',
					icon: '../../static/login/chushimao.png'
				}
			],
			form: {
				telephone: '',
				password: ''
			},
			rules: {
				telephone: [
					{ required: true, message: '请输入你们的专属号码', trigger: 'blur' },
					{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入爱的密码', trigger: 'blur' },
					{ min: 6, message: '密码需要6位以上哦', trigger: 'blur' },
					{ pattern: /^(?=.*[A-Za-z])(?=.*\d).{6,}$/, message: '需包含字母和数字', trigger: 'blur' }
				]
			},
			particles: [],
			loginBtnStyle: {
				background: 'linear-gradient(135deg, #FF9AA2 0%, #FFB7B2 100%)',
				color: '#FFFFFF',
				height: '90rpx',
				fontSize: '34rpx',
				marginTop: '60rpx'
			}
		}
	},
	computed: {
		welcomeText() {
			return this.currentRole === 'couple'
				? '今天想品尝什么美味？'
				: '准备好为TA下厨了吗？'
		}
	},

	mounted() {
		this.generateParticles()
	},

	methods: {
		// 生成背景粒子
		generateParticles() {
			const particles = []
			for (let i = 0; i < 30; i++) {
				particles.push({
					x: Math.random() * 100,
					y: Math.random() * 100,
					size: Math.random() * 0.8 + 0.4,
					color: `hsl(${Math.random() * 360}, 70%, 70%)`
				})
			}
			this.particles = particles
		},

		// 切换角色
		switchRole(role) {
			this.currentRole = role
			uni.vibrateShort()
		},

		// 处理登录
		async handleLogin() {
			try {
				const valid = await this.$refs.uForm.validate()
				uni.showLoading({ title: '验证爱情密码...', mask: true })
				if (valid) {
					const res = await login(this.form)
					if (res.code == 200) {
						this.loginSuccess(res.id, res.token)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}
			} catch (err) {
				console.log('未知错误:', err)
			} finally {
				uni.hideLoading()
			}
		},

		// 登录成功处理
		loginSuccess(id, token) {
			uni.setStorageSync('userRole', this.currentRole)
			uni.setStorageSync('userId', id)
			uni.setStorageSync('userToken', token)
			uni.showToast({
				title: `欢迎回来，${this.currentRole === 'couple' ? '小可爱' : '大厨师'}！`,
				icon: 'none'
			})

			setTimeout(() => {
				uni.navigateTo({
					url: this.currentRole === 'couple'
						? '/pages/index/index'
						: '/pages/kitchen/kitchen'
				})
			}, 2000)
		},

		// 导航跳转
		navTo(path) {
			console.log("meizou zheli", path);
			uni.navigateTo({ url: path })
		},

		// 爱心动画样式
		getHeartStyle(n) {
			return {
				animationDelay: `${n * 0.3}s`,
				left: `${Math.random() * 90 + 5}%`
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.login-container {
	height: 100vh;
	background: linear-gradient(135deg, #FFF0F5 0%, #FFE4E1 100%);
	position: relative;
	overflow: hidden !important;

	.particle-bg {
		position: absolute;
		width: 100%;
		height: 100%;

		.particle {
			position: absolute;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			animation: float 8s infinite linear;
			opacity: 0.6;
		}
	}

	.header-illustration {
		padding: 30rpx 0;
		text-align: center;

		image {
			width: 500rpx;
			height: 300rpx;
			filter: drop-shadow(0 10rpx 20rpx rgba(255, 105, 180, 0.2));
		}
	}

	.role-switch {
		display: flex;
		justify-content: center;
		margin: 40rpx 0;

		.role-card {
			width: 240rpx;
			height: 280rpx;
			margin: 0 30rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 32rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transition: all 0.3s;
			backdrop-filter: blur(10rpx);
			box-shadow: 0 8rpx 24rpx rgba(255, 105, 180, 0.1);

			image {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 20rpx;
			}

			text {
				font-size: 30rpx;
				color: #FF69B4;
			}

			&.active {
				transform: translateY(-10rpx);
				background: rgba(255, 245, 230, 0.95);
				box-shadow: 0 12rpx 32rpx rgba(255, 105, 180, 0.2);
			}
		}
	}

	.form-box {
		background: rgba(255, 255, 255, 0.95);
		margin: 40rpx;
		padding: 50rpx 40rpx;
		border-radius: 48rpx;
		backdrop-filter: blur(20rpx);
		box-shadow: 0 16rpx 48rpx rgba(255, 105, 180, 0.1);

		.form-title {
			text-align: center;
			font-size: 40rpx;
			color: #FF69B4;
			margin-bottom: 60rpx;
			font-weight: 500;
		}

		/deep/ .u-form-item__body {
			background: rgba(255, 250, 240, 0.8);
			border-radius: 24rpx;
			margin-bottom: 40rpx;
			padding: 20rpx 30rpx;
		}

		.placeholder-style {
			color: #FFB6C1 !important;
		}
	}

	.footer-links {
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;

		text {
			color: #FF7F7F;
			font-size: 26rpx;
			border-bottom: 2rpx solid transparent;
			transition: all 0.3s;

			&:active {
				opacity: 0.6;
			}
		}
	}

	.floating-hearts {
		position: absolute;
		width: 100%;
		height: 100%;
		pointer-events: none;

		.heart {
			position: absolute;
			font-size: 48rpx;
			animation: heartFloat 3s infinite;
			opacity: 0;
			filter: drop-shadow(0 4rpx 8rpx rgba(255, 59, 48, 0.2));
		}
	}
}

@keyframes float {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-200rpx);
	}

	100% {
		transform: translateY(-400rpx);
	}
}

@keyframes heartFloat {
	0% {
		opacity: 0;
		transform: translateY(0);
	}

	20% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translateY(-600rpx) rotate(360deg);
	}
}
</style>